<template>
    <div>
        <swipt v-if="banner.length!==0" :banner='banner'/>
        <div class="miaoshu">
            <h2>{{name}}</h2>
            <p>{{price | Rmb}}</p>
        </div>
        <div class="canshu">
            <h1>产品参数</h1>
            <div >
                <h3 v-for="item in attribute" :key="item.value">{{item.name}} : <span>{{item.value}}</span></h3>
            </div>
            <img :src="info.list_pic_url" alt="">
            <img :src="info.primary_pic_url" alt="">
        </div>
        <div class="tupian" v-html="info.goods_desc"></div>
        <detailshop v-if="info.length!==0 && productList.length!==0" :productList="productList" :info='info'/>
    </div>
</template>

<script>
// 导入请求
import {getShop} from "@/https/http"
// 导入轮播图组件
import  swipt from "@/components/swipt";
// 导入底部购物导航栏
import detailshop from '@/components/detailShop'

export default {
    data(){
        return{
            banner:[],
            name:'',
            price:0,
            attribute:[],
            info:{},
            productList:[]
        }
    },
    components:{
        swipt,
        detailshop
    },
    mounted(){
        let id = this.$route.query.id
        getShop({id}).then(res=>{
            console.log(333,res);
            let str = JSON.stringify(res.data.data.gallery).replace(/img/g,'image')
            this.banner = JSON.parse(str)
            console.log(9562,this.banner);
            this.name = res.data.data.info.name
            this.price = res.data.data.info.retail_price
            this.attribute = res.data.data.attribute
            this.info = res.data.data.info
            this.productList = res.data.data.productList
            console.log(this.info);
        })

    }
}
</script>

<style scoped lang='less'>
    .miaoshu{
        text-align: center;
        h2{
            margin: 10px auto;
        }
        p{
            color: red;
        }
    }
    .canshu{
        padding-left: 10px;
        div{
            padding-left: 20px;
            h3{
                margin: 5px;
                font-size: 15px;
            }
        }
    }
    /deep/ img{
        width: 100%;
        display: block;
    }
</style>